import Image from "next/image"
import Link from "next/link"

export default function Hero() {
  return (
    <div className="relative isolate overflow-hidden bg-black pt-14">
      <Image
        src="https://beraroot.com/assets/hero-bg-c9e9064c.jpg"
        alt="Background"
        fill
        className="absolute inset-0 -z-10 h-full w-full object-cover opacity-30"
        priority
      />

      <div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8 lg:py-40">
        <div className="flex flex-col items-center text-center">
          <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl mb-6">
            <span className="block">BeraRoot</span>
            <span className="block text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
              Empowering the Bera Ecosystem
            </span>
          </h1>
          <p className="mt-6 text-lg leading-8 text-gray-300 max-w-2xl">
            BeraRoot is a comprehensive platform designed to enhance the Bera blockchain ecosystem through innovative DA
            services, NFT showcases, and staking opportunities.
          </p>
          <div className="mt-10 flex items-center justify-center gap-x-6">
            <Link
              href="#da-service"
              className="rounded-full bg-gradient-to-r from-purple-600 to-pink-600 px-8 py-3 text-base font-semibold text-white shadow-sm hover:from-purple-700 hover:to-pink-700"
            >
              Explore Services
            </Link>
            <Link href="#road-map" className="text-base font-semibold leading-6 text-white hover:text-purple-400">
              View Roadmap <span aria-hidden="true">→</span>
            </Link>
          </div>
        </div>
      </div>

      <div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-black to-transparent"></div>
    </div>
  )
}
